
@use "./common" as common;
@import "~bootstrap/scss/bootstrap-reboot";
$blue:    common.val('--color-primary');
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #e83e8c;
$red:     common.val('--color-danger');
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #28a745;
$teal:    #20c997;
$cyan:    #17a2b8;

$black: #1D2125;
$gray-200: #EBEBEB;
$gray-300: #D9D9D9;
$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-800;



$theme-colors: map-merge(
    $theme-colors,
    (
            "primary":    $primary,
            "secondary":  $secondary,
            "success":    $success,
            "info":       $info,
            "warning":    $warning,
            "danger":     $danger,
            "light":      $light,
            "dark":       $dark,
            "black":      $black,
    ),
);

@each $k,$v in $theme-colors {
  .bs-text-color-#{$k} {
    color: $v;
  }
}

$btn-box-shadow: none;
$btn-focus-width: 0;

$btn-focus-box-shadow: 1rem;
$btn-active-box-shadow: 1rem;
$btn-font-size: common.$global-fz;
$btn-border-radius: .04rem;
$btn-padding-y: 0;
$btn-padding-x: 0;
@import "~bootstrap/scss/buttons";

.btn-orange {
  @include button-variant(common.val(--color-orange), common.val(--color-orange));
}

$input-font-size: common.$global-fz;
$input-placeholder-color: common.val(--color-gray);
$input-border-color: $gray-300;
$input-focus-box-shadow: .1rem;
$input-border-radius: .04rem;
$input-font-size: common.$global-fz;
$input-padding-y: .1rem;
$input-padding-x: .1rem;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) ;
$input-focus-border-color: $input-border-color;
@import "~bootstrap/scss/forms";

$input-border-color: $gray-300;
$input-group-addon-bg: $gray-200;
@import "~bootstrap/scss/input-group";

.form-control {
  // Placeholder
  &::placeholder {
    font-size: common.$global-fz;
  }
}

.input-prepend-transparent {
  .input-group-text {
    background-color: #fff;
    border-right-color: transparent;
    padding-bottom: 0;
    padding-top: 0;
  }
  .form-control {
    border-left-color: transparent;
  }
}


$nav-link-padding-x: 0;
$nav-link-padding-y: .2rem;
$nav-tabs-link-active-color: common.val('--color-primary');
@import "~bootstrap/scss/nav";

.nav-login {
  .nav-link {
    cursor: pointer;
    &.active {
      color: $nav-tabs-link-active-color;
    }
  }
}

.nav-tab-lines {
  display: block;
  height:2px;
  background-color: common.val('--color-light-gray');
  .nav-tab-line {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
  }
}

$modal-inner-padding: 0;
$modal-content-border-radius: .1rem;
$modal-close-width: .34rem !default;
$modal-close-height: .34rem !default;
$modal-backdrop-bg: #000;
$modal-backdrop-opacity: .7;
$modal-scale-transform: scale(1);
@import "~bootstrap/scss/modal";
.modal-close {
  width:$modal-close-width;
  height:$modal-close-height;
  background:rgba(255,255,255,1);
  box-shadow:0rem 0.02rem 0.05rem 0rem rgba(197,199,203,0.1);
  border-radius: 1000px;
  position: absolute;
  right: -$modal-close-width;
  top: -$modal-close-height;
}

@include media-breakpoint-up(sm) {
  .modal-dialog {
    max-width: none;
  }
}


@import "~bootstrap/scss/transitions";
